<script lang="ts" setup>
import { ref } from 'vue'
import { Back } from '@element-plus/icons-vue'
import { More } from '@element-plus/icons-vue'

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>

<template>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo gradient-background"
      mode="horizontal"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item>酒店管理系统</el-menu-item>
    </el-menu>

    <div class="common-layout" style="height:100%;">
      <el-container>
        <el-container>
          <el-aside width="250px">
            <el-menu
              active-text-color="#ffd04b"
              class="el-menu-vertical-demo gradient-background"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
              router="true"
            >
              <!-- <el-sub-menu index="1">
                <template #title>
                  <el-icon><more/></el-icon>
                  <span>管理</span>
                </template>
              </el-sub-menu> -->
              <el-menu-item index="4" route="reservations">
                <el-icon><icon-menu /></el-icon>
                <span>预约信息</span>
              </el-menu-item>
              <el-menu-item index="" route="checkins">
                <el-icon><icon-menu /></el-icon>
                <span>入住登记</span>
              </el-menu-item>
              <el-menu-item index="7" route="rooms">
                <el-icon><icon-menu /></el-icon>
                <span>房间管理</span>
              </el-menu-item>
              <el-menu-item index="6" route="guests">
                <el-icon><document /></el-icon>
                <span>客人信息</span>
              </el-menu-item>
              <el-menu-item index="8" route="employees">
                <el-icon><document /></el-icon>
                <span>员工信息管理</span>
              </el-menu-item>
              <el-menu-item index="11" route="user">
                <el-icon><document /></el-icon>
                <span>账号信息</span>
              </el-menu-item>
              <el-menu-item index="14" route="tubiao">
                <el-icon><document /></el-icon>
                <span>统计图表</span>
              </el-menu-item>
              <el-menu-item index="9" route="one">
                <el-icon><back /></el-icon>
                <span>返回</span>
              </el-menu-item>
              <el-menu-item index="4" route="one">
                <span></span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

  
<style scoped>
/* 自定义一个类来设置渐变背景 */
.gradient-background {
  background-image: linear-gradient(to right, #183a8a, #3b87c5);
  /* 你可以根据需要调整渐变的方向和颜色 */
}

.el-menu-item {
  height: 80px;
  line-height: 50px;
}

/* 添加悬停时的背景颜色 */
.el-menu-item:hover,
.el-sub-menu .el-menu-item:hover {
  background-color: #002f6c; /* 您可以根据需要选择深色背景 */
  transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

/* 悬停状态下的文本设置不同的颜色 */
.el-menu-item:hover span,
.el-sub-menu .el-menu-item:hover span {
  color: #feaf05e1; /* 文本颜色 */
}

/* 移除“酒店管理系统”部分的悬停效果 */
.el-menu-demo .el-menu-item:hover {
  background-color: transparent; /* 移除背景颜色变化 */
  transition: none; /* 移除过渡效果 */
}

/* 移除“管理”部分的悬停效果 */
.el-menu-vertical-demo .el-sub-menu .el-sub-menu__title:hover {
  background-color: transparent; /* 移除背景颜色变化 */
  transition: none; /* 移除过渡效果 */
}

/* 设置激活状态下的背景颜色 */
.el-menu-item.is-active,
.el-sub-menu .el-menu-item.is-active {
  background-color: #1d4982; /* 激活状态下的深色背景 */
}

/* 设置激活状态下的文本颜色 */
.el-menu-item.is-active span,
.el-sub-menu .el-menu-item.is-active span {
  color: #feaf05e1; /* 激活状态下的文本颜色 */
}

</style>